<template>
  <div class="zl-demo">
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        :default-active="value"
        text-color="#fff"
        @select="selectMenu"
      >
        <template v-for="(item) in menu" :key="item.index">
          <el-sub-menu v-if="item.hasChild" :index="item.index">
            <template #title>
              <el-icon><Menu /></el-icon>
              <span>{{item.title}}</span>
            </template>
            <template v-for="(oneChild) in item.children" :key="oneChild.index">
              <el-sub-menu v-if="oneChild.hasChild" :index="oneChild.index">
                <template #title>
                  <el-icon><location /></el-icon>
                  <span>{{oneChild.title}}</span>
                </template>
                <el-menu-item v-for="(twoChild) in oneChild.children" :key="twoChild.index" :index="twoChild.index">{{twoChild.title}}</el-menu-item>
              </el-sub-menu>
              <el-menu-item v-else :index="oneChild.index">{{oneChild.title}}</el-menu-item>
            </template>
          </el-sub-menu>
          <el-menu-item v-else :index="item.index">
            <el-icon><document /></el-icon>
            <span>{{item.title}}</span>
          </el-menu-item>
        </template>

      </el-menu>
    </div>
</template>

<script>
import { toRef, ref } from 'vue';
import yunApi from './toolApi.js'
import { Menu } from '@element-plus/icons-vue'
export default {
    name: 'zlZemuLeft',
    components: {
      Menu
    },
    props: {
        // 监听值
        value: {
            type: Number,
            default: 10
        },
        // 监听对象值
        item: {
            type: Object,
            default: function() {
                return null
            }
        }
    },
    setup(props, context) {
      // 最多支持三级
      let menu = ref(toRef(props, 'item').value.attribute.menuList.extendData);
      const selectMenu = (index, indexPath, item, routeResult) => {
        yunApi.zl_emit_event('showComponent', window, { key: 'selectMenu', value: index })
      }
      return {
        selectMenu,
        menu
      }
    },
    watch: {
        item: {
            handler(v) {
                this.init();
            },
            deep: true
        },
        // 监听value变化
        value: {
            handler(v) {
            },
            deep: true,
            immediate: true
        }
    },
    emit: ['update:modelValue'],
    data() {
        return {
        }
    },
    methods: {
      init() {
        console.log(this.item)
          this.menu = this.item.attribute.menuList.extendData
      }
    },
    mounted() {
      this.$nextTick(() => {
        yunApi.zl_emit_event('showComponent', window, { key: 'selectMenu', value: this.value })
      })
    }
}
</script>

<style scoped lang="less">
  .el-menu-vertical-demo {
    min-width: 200px;
    height: 100%;
  }
</style>
